<mat-toolbar class="omv-top-bar"
             color="primary">
  <button mat-icon-button
          matTooltip="{{ (navigationSidenav?.opened ? 'Hide navigation' : 'Show navigation') | translate }}"
          (click)="onToggleNavigationSidenav()">
    <mat-icon svgIcon="{{ icon.menu }}">
    </mat-icon>
  </button>
  <span fxFlex></span>
  <span class="hostname">{{ hostname }}</span>
  <mat-divider vertical="true"></mat-divider>
  <button *ngIf="permissions?.role.includes(roles.admin)"
          mat-icon-button
          matTooltip="{{ 'Notifications' | translate }}"
          (click)="onToggleNotificationsSidenav()">
    <mat-icon svgIcon="{{ icon.bell }}"
              [matBadge]="numNotifications"
              matBadgeColor="accent"
              matBadgeOverlap="true"
              matBadgeSize="small">
    </mat-icon>
  </button>
  <button mat-icon-button
          matTooltip="{{ 'Settings' | translate }}"
          [matMenuTriggerFor]="settingsMenu">
    <mat-icon svgIcon="{{ icon.settings }}">
    </mat-icon>
  </button>
  <button mat-icon-button
          matTooltip="{{ 'Help' | translate }}"
          [matMenuTriggerFor]="helpMenu">
    <mat-icon svgIcon="{{ icon.help }}">
    </mat-icon>
  </button>
  <button mat-icon-button
          matTooltip="{{ 'Power' | translate }}"
          [matMenuTriggerFor]="powerMenu">
    <mat-icon svgIcon="{{ icon.power }}">
    </mat-icon>
  </button>

  <mat-menu #settingsMenu="matMenu">
    <button mat-menu-item
            disabled>
      <mat-icon svgIcon="{{ icon.user }}"></mat-icon>
      <span translate>Signed in as <b>{{ username }}</b></span>
    </button>
    <button *ngIf="permissions?.role.includes(roles.user)"
            mat-menu-item
            routerLink="/usermgmt/profile">
      <mat-icon svgIcon="mdi:account-details"></mat-icon>
      <span translate>Your profile</span>
    </button>
    <button mat-menu-item
            routerLink="/usermgmt/change-password">
      <mat-icon svgIcon="{{ icon.password }}"></mat-icon>
      <span translate>Change Password</span>
    </button>
    <mat-divider></mat-divider>
    <button mat-menu-item
            [matMenuTriggerFor]="localeMenu">
      <mat-icon svgIcon="mdi:earth"></mat-icon>
      <span translate>Language</span>
    </button>
    <button mat-menu-item
            routerLink="/dashboard/settings">
      <mat-icon svgIcon="{{ icon.apps }}"></mat-icon>
      <span translate>Dashboard</span>
    </button>
    <mat-divider></mat-divider>
    <button mat-menu-item
            (click)="onClearStateStorage()">
      <mat-icon svgIcon="{{ icon.reset }}"></mat-icon>
      <span translate>Reset UI to defaults</span>
    </button>
  </mat-menu>

  <mat-menu #powerMenu="matMenu">
    <button mat-menu-item
            (click)="onLogout()">
      <mat-icon svgIcon="{{ icon.logout }}"></mat-icon>
      <span translate>Logout</span>
    </button>
    <button *ngIf="permissions?.role.includes(roles.admin)"
            mat-menu-item
            (click)="onReboot()">
      <mat-icon svgIcon="{{ icon.reboot }}"></mat-icon>
      <span translate>Reboot</span>
    </button>
    <button *ngIf="permissions?.role.includes(roles.admin)"
            mat-menu-item
            (click)="onStandby()">
      <mat-icon svgIcon="{{ icon.standby }}"></mat-icon>
      <span translate>Standby</span>
    </button>
    <button *ngIf="permissions?.role.includes(roles.admin)"
            mat-menu-item
            (click)="onShutdown()">
      <mat-icon svgIcon="{{ icon.shutdown }}"></mat-icon>
      <span translate>Shutdown</span>
    </button>
  </mat-menu>

  <mat-menu #localeMenu="matMenu">
    <button *ngFor="let locale of locales | keyvalue"
            mat-menu-item
            [ngClass]="{'active': locale.key === currentLocale}"
            [disabled]="locale.key === currentLocale"
            (click)="onLocale(locale.key)">
      <span>{{ locale.value }}</span>
    </button>
  </mat-menu>

  <mat-menu #helpMenu="matMenu">
    <a class="omv-text-decoration-none"
       href="https://docs.openmediavault.org"
       target="_blank">
      <button mat-menu-item>
        <mat-icon svgIcon="mdi:script-text"></mat-icon>
        <span translate>Documentation</span>
      </button>
    </a>
    <a class="omv-text-decoration-none"
       href="https://forum.openmediavault.org"
       target="_blank">
      <button mat-menu-item>
        <mat-icon svgIcon="mdi:forum"></mat-icon>
        <span translate>Forum</span>
      </button>
    </a>
    <a class="omv-text-decoration-none"
       href="https://www.openmediavault.org"
       target="_blank">
      <button mat-menu-item>
        <mat-icon svgIcon="mdi:web"></mat-icon>
        <span translate>Homepage</span>
      </button>
    </a>
    <mat-divider></mat-divider>
    <button mat-menu-item
            routerLink="/about">
      <mat-icon svgIcon="{{ icon.information }}"></mat-icon>
      <span translate>About</span>
    </button>
  </mat-menu>
</mat-toolbar>
